<template>
  <LinkFormRender
      ref="linkFormRenderRef"
      :src="formLink"
      v-show="isLinkForm"
      v-loading="loading"
    />
  <el-card shadow="never" class="box-card" v-loading="loading" v-show="!isLinkForm">
    <FormRender ref="formRenderRef" />
  </el-card>
</template>

<script setup>
import {
  reactive,
  ref,
  unref,
  nextTick,
  watch,
  computed,
  onMounted,
} from "vue";
import { useAutoPostHeight } from "../../hooks/useAutoPostHeight";
import { useWorkTaskStore } from "@/stores/workTask";
import { useDynamicFormDesignStore } from "@/stores/dynamicFormDesign";
import FormRender from "@/components/WorkflowDesign/formComponents/FormRender.vue";
import LinkFormRender from "@/components/WorkflowDesign/formComponents/LinkFormRender.vue";
const props = defineProps({
  taskId: {
    default: "",
  },
  entityFullName: {
    default: "",
  },
  entityKeyValue: {
    default: "",
  },
});
const loading = ref(false);
const formRenderRef = ref(null);

const workTaskStore = useWorkTaskStore();
const dynamicFormDesignStore = useDynamicFormDesignStore();


const formLink = ref("");
const taskId = computed(() => props.taskId);

const hasTaskId = computed(() => {
  return props.taskId && props.taskId.length > 0;
  // return true;
});
const isLinkForm = computed(() => {
  return formLink.value && formLink.value.length > 0;
});

const load = async (taskId) => {
  await nextTick();

  setTimeout(() => {
    if (!formRenderRef.value) {
      formRenderRef.value.setDesignContent("", "");
      formRenderRef.value.setFormData({});
    }

    getWorkTaskAndRendForm(taskId);
  }, 1000);
};

const getWorkTaskAndRendForm = async (id) => {
  const workTask = await workTaskStore.getWorkTask({ id: id });
  formLink.value = workTask.formLink;
  await getFormDesignVersionByTaskId(id);

  let formData = {};
  try {
    formData = JSON.parse(workTask.formData);
  } catch (e) {
    formData = {};
  }
  formRenderRef.value.setFormData(formData);
};

const getFormDesignVersionByTaskId = async (taskId) => {
  loading.value = true;
  const res = await dynamicFormDesignStore.getFormDesignVersionByWorkTaskId({
    worktaskId: taskId,
  });

  if (res) {
    formRenderRef.value.setDesignContent(
      res.designContent,
      res.designFramework
    );
  }
  loading.value = false;
};

watch(
  () => props,
  () => {
    debugger
    taskId.value = props.taskId;
    reload();
  },
  {
    deep: true,
  }
);

const reload = async () => {
  if (!hasTaskId) {
    const res = await workTaskStore.getWorkTaskByEntityInfo({
      entityFullName: props.entityFullName,
      entityKeyValue: props.entityKeyValue,
    });
    load(res.id);
  } else {
    load(props.taskId);
  }
};

useAutoPostHeight("Workflow-FormDetail");

onMounted(async () => {
  reload();
});
</script>

<style lang="less" scoped>
:deep(.no-header-dialog) {
  padding: 0px !important;

  .el-dialog__header {
    padding: 9px;
    height: 30px;
    text-align: right;
  }

  .el-dialog__body {
    width: 100%;
    height: calc(100vh - 150px);
    padding: 0px !important;
  }
}
.content-box {
  padding: 10px;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}
</style>
